<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>16.正则的方法replace来过滤HTML标签</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
            }
            .clearfix:before,
            .clearfix:after {
                display: table;
                content: '';
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                *zoom: 1;
            }
            .fl {
                float: left;
            }
            .fr {
                float: right;
            }
            .wrap {
                width: 400px;
                margin: 100px auto 0;
            }
            .wrap textarea,
            .wrap input {
                display: block;
            }
            .wrap textarea {
                width: 300px;
                height: 180px;
                border: 1px solid #000;
                margin: 10px 0;
                font-size: 24px;
            }
            .wrap input {
                width: auto;
                height: 50px;
                border: 1px solid #000;
                padding: 0 10px;
                cursor: pointer;
                outline: none;
                margin: 0 0 0 88px;
                font-size: 16px;
                background-color: #666;
                color: #fff;
                border-radius: 5px;
            }
        </style>
        <script>
            /**
             * replace：正则去匹配字符串，匹配成功的字符去替换成新的字符串
             * replace的写法：旧的字符串.replace(正则, 新的字符串)
             * 正则默认是匹配成功就会结束，不会继续匹配
             * 如果想要查找全部，就要加标识g(global ---> 全局匹配)
             * 量词：匹配不确定的位置
             * +：至少出现一次(大于等于1)
             */
            /**
             * 替换前：<h3 class="box">allen</h3>我就是小小游英文名是allen<span><em></em></span>
             * 替换后：allen我就是小小游英文名是allen
             */
            window.onload = function () {
                var oBtn = document.getElementsByTagName("input")[0];
                var oTextArea = document.getElementsByTagName("textarea");
                // 这个相对不是那么的靠谱
                // var re = /<\w+>/g;

                // 绝对靠谱
                var re = /<[^>]+>/g;

                oBtn.addEventListener('click', function () {
                    oTextArea[1].value = oTextArea[0].value.replace(re, '');
                }, false);
            };
        </script>
    </head>
    <body>
        <div class="wrap">
            替换前：<textarea name="name1"></textarea>
            <input type="button" value="点击过滤HTML标签" />
            替换后：<textarea name="name2"></textarea>
        </div>
    </body>
</html>
